<template>
<div class='main'>
    <div class='head'>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{path:'/'}">系统设置</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/'}">用户管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/'}">角色信息</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class='content'>
        <div class='title'>角色信息</div>
       <el-form ref="form" :model="form" label-width="80px" style='width:80%;margin:auto;'>
          <el-form-item label="角色名称">
            <el-input v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="form.roleDesc"></el-input>
          </el-form-item>
          <el-form-item label="权限">
             <el-checkbox-group v-model="form.identity">
                <el-checkbox label="WEB权限全选" name="identity"></el-checkbox>
                <el-checkbox label="手机端任务上传" name="identity"></el-checkbox>
             </el-checkbox-group>
          </el-form-item>
          <el-form-item label="主菜单">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="首页" name="type"></el-checkbox>
                <el-checkbox label="环境监测" name="type"></el-checkbox>
                <el-checkbox label="任务动态" name="type"></el-checkbox>
                <el-checkbox label="溯源查看" name="type"></el-checkbox>
                <el-checkbox label="日常管理" name="type"></el-checkbox>
                <el-checkbox label="系统设置" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
           <el-form-item>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
                <el-button @click="onCancel()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>
<script>
  export default {
    name: 'roleInfo',
    data() {
      return {
        form: {
          name: '',
          remark: '',
          identity: [],
          type: []
        },
        type: ''
      }
    },
   beforeRouteEnter (to, from, next) {
      next(vm =>{
      vm.form = Object.assign({},vm.$route.query.data)
      vm.type = vm.$route.query.typeId
      })
   },   
    methods: {
      onSubmit() {
        console.log(this.form);
      },
      onCancel() {
        this.$router.go(-1)
    }
    }
    
  }
</script>
<style lang="scss">
.main{
padding: 10px 20px;
}
.title{
    font-size: 20px;
    font-weight: 600;
    margin: 10px;
}
</style>